<template>
  <div class="laboratory_list_wrap">
    <!-- 查询表单 -->
    <el-card class="query_form_card">
      <el-form style="height: 30px" :inline="true" :model="queryFormData" class="demo-form-inline">
        <el-form-item>
          <template #label>
            <i class="iconfont icon-shiyanshiguanli"></i>
            <span>实验室名称</span>
          </template>
          <el-input v-model="queryFormData.LaboratoryName" placeholder="请输入实验室名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="queryLabClick">查询</el-button>
          <el-button type="primary" :icon="Plus" @click="addLabClick">添加实验室</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 实验室列表 -->
    <el-card class="lab_table_card">
      <div class="table_box">
        <el-table style="width: 800px" :data="labList" v-loading="isTableLoading" stripe>
          <el-table-column prop="num" label="序号" align="center" width="100" />
          <el-table-column prop="laboratoryHome" label="实验室名称" align="center" />
          <!-- <el-table-column prop="labDesc" label="备注" align="center" /> -->
          <el-table-column prop="labDesc" label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" @click="editLabClick(scope.row)" link>编辑</el-button>

              <el-popconfirm title="确定要删除此实验室?" @confirm="delLabClick(scope.row)">
                <template #reference>
                  <el-button type="danger" :icon="Delete" link>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="tab_pagination"
          background
          layout="prev, pager, next"
          v-model:current-page="queryFormData.page"
          v-model:page-size="queryFormData.size"
          :total="tableTotal"
          @change="paginationChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑弹窗 -->
    <el-dialog
      v-model="isShowAddEditLabDialog"
      :title="`${addEditFormData.laboratoryId ? '编辑' : '添加'}实验室`"
      width="500"
      :before-close="addEditLabDialogCancelClick"
    >
      <div class="add_edit_lab_dialog_box">
        <div class="add_edit_lab_form_item_box">
          <el-form
            ref="addEditLabFormRef"
            :model="addEditFormData"
            :rules="addEditRules"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item label="实验室房间号" prop="laboratoryHome">
              <el-input v-model="addEditFormData.laboratoryHome" style="width: 240px" placeholder="请输入实验室房间号" />
            </el-form-item>
          </el-form>
          <!-- <span class="label">实验室房间号:</span>
          <el-input v-model="addEditFormData.laboratoryHome" style="width: 240px" placeholder="请输入实验室房间号" /> -->
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addEditLabDialogCancelClick">取消</el-button>
          <el-button type="primary" @click="addEditLabDialogConfirmClick"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Search, Edit, Delete, Plus } from "@element-plus/icons-vue";
import "./index.scss";
import { message } from "ant-design-vue";
export default defineComponent({
  name: "LaboratoryList"
});
</script>
<script lang="ts" setup>
import { labListType } from "./type";
import { numComp } from "@/utils/table";
import {
  selectLaboratoryByPageApi,
  addLaboratoryApi,
  editLaboratoryApi,
  deleteLaboratoryApi
} from "@/api/modules/laboratoryList/index";
import _ from "lodash";
import type { FormRules } from "element-plus";

interface RuleForm {
  laboratoryHome: string;
}

// 查询表单数据
const queryFormData = reactive({
  page: 1,
  size: 10,
  LaboratoryName: ""
});

// 表格加载标识
const isTableLoading = ref(false);

// 表格数据总数;
const tableTotal = ref(40);

// 实验室列表
const labList = ref<labListType>([]);

// 显示添加/编辑实验室信息的弹窗标识
const isShowAddEditLabDialog = ref(false);

// 添加/编辑实验室表单Ref
const addEditLabFormRef = ref(null);

// 添加/编辑实验室表单校验规则
const addEditRules = reactive<FormRules<RuleForm>>({
  laboratoryHome: [{ required: true, message: "实验室房间号为必填项", trigger: "blur" }]
});

// 添加/编辑实验室弹窗数据
const addEditFormData = ref<{
  laboratoryId?: number | string;
  laboratoryHome: string;
}>({
  laboratoryId: null,
  laboratoryHome: ""
});

// 添加实验室点击事件
const addLabClick = () => {
  resetAddEditFormData();
  isShowAddEditLabDialog.value = true;
};

// 重置添加/编辑实验室弹窗表单
const resetAddEditFormData = () => {
  addEditFormData.value = {
    laboratoryId: null,
    laboratoryHome: ""
  };
  if (!addEditLabFormRef.value) return;
  addEditLabFormRef.value.resetFields();
};

// 删除实验室点击事件
const delLabClick = row => {
  console.log(row);
  deleteLaboratoryFunc(row.laboratoryId);
};

// 删除实验室请求函数
const deleteLaboratoryFunc = async laboratoryId => {
  let data = {
    laboratoryId: laboratoryId
  };
  await deleteLaboratoryApi(data)
    .then(res => {
      if (res.result == "success") {
        message.success("删除成功");
      } else if (res.result == "error") {
        message.error("删除失败");
      }
    })
    .finally(() => {
      selectLaboratoryByPageFunc();
    });
};

// 编辑实验室点击事件
const editLabClick = row => {
  let lab = _.cloneDeep(row);
  delete lab.num;
  addEditFormData.value = lab;
  isShowAddEditLabDialog.value = true;
};

// 添加实验室请求函数
const addLaboratoryFunc = async () => {
  let data = {
    laboratoryHome: addEditFormData.value.laboratoryHome
  };
  await addLaboratoryApi(data)
    .then(res => {
      if (res.result == "success") {
        isShowAddEditLabDialog.value = false;
        message.success("添加成功");
      } else if (res.result == "error") {
        message.error("添加失败");
      }
    })
    .finally(() => {
      selectLaboratoryByPageFunc();
    });
};

// 编辑实验室请求函数
const editLaboratoryFunc = async () => {
  let data = {
    laboratoryId: addEditFormData.value.laboratoryId,
    laboratoryHome: addEditFormData.value.laboratoryHome
  };
  await editLaboratoryApi(data)
    .then(res => {
      if (res.result == "success") {
        isShowAddEditLabDialog.value = false;
        message.success("修改成功");
      } else if (res.result == "error") {
        message.error("修改失败");
      }
    })
    .finally(() => {
      selectLaboratoryByPageFunc();
    });
};

// 添加/编辑实验室弹窗确定点击事件
const addEditLabDialogConfirmClick = () => {
  addEditLabFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      if (addEditFormData.value.laboratoryId) {
        editLaboratoryFunc();
      } else {
        addLaboratoryFunc();
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 添加/编辑实验室弹窗取消点击事件
const addEditLabDialogCancelClick = () => {
  isShowAddEditLabDialog.value = false;
  resetAddEditFormData();
};

// 处理表格序号
const disposeTableNum = () => {
  let page = queryFormData.page;
  let size = queryFormData.size;
  labList.value.forEach((item, indexL) => {
    item.num = numComp(page, size, indexL);
  });
};

// 分页器change事件
const paginationChange = e => {
  queryFormData.page = e;
  selectLaboratoryByPageFunc();
};

// 查询实验室点击事件
const queryLabClick = () => {
  queryFormData.page = 1;
  selectLaboratoryByPageFunc();
};

// 查询实验室
const selectLaboratoryByPageFunc = async () => {
  isTableLoading.value = true;
  await selectLaboratoryByPageApi(queryFormData)
    .then(res => {
      if (res.result == "success") {
        labList.value = res.data.list;
        tableTotal.value = res.data.total;
        disposeTableNum();
      }
    })
    .finally(() => {
      isTableLoading.value = false;
    });
};

// init
onMounted(() => {
  selectLaboratoryByPageFunc();
});
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
